Ionic Part 3

I went to this startup city thing a few months ago, and was amazed that people in there early 20’s or 30’s have never “Sketched it up”. I always think a visual helps connect everything together. I almost always “Sketch it up” Whether it be a computer network or an app.

Doing a sketch up gives you a huge leg up, also lets you get the idea of the flow of your application. I recommend a good wireframe, I use.. This It’s by no means the best and it isn’t free, I just suck at art (as you will see). This is just to get an idea of the flow. Let the emulator make it look good.

Here is what I came up with

Nothing too fancy.

Lets do the menu first.

nano templates/menu.html

I didn’t think of a title for the menu yet, I think I will just call it menu 🙂

<ion-side-menus>
 
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
 
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close>
          Settings
        </ion-item>
        <ion-item nav-clear menu-close>
          Quiet Mode
        </ion-item>
       </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

ionic emulate ios

Looks kinda like the picture!

Wouldn’t it be cool if it had some nice icons. A little bit of eye candy?

Ionic comes with some sweet built in “fonts” that are images

<ion-side-menus>
 
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
 
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close>
         <i class="icon ion-levels"></i>
          Settings
        </ion-item>
        <ion-item nav-clear menu-close>
         <i class="icon ion-plane"></i>
          Quiet Mode
        </ion-item>
       </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Looking sexy now.

Let’s make quiet mode do something, With a checkbox.

<ion-checkbox>
    Quiet Mode
</ion-checkbox>

That looks pretty good.

We should make the settings go somewhere.

<ion-item nav-clear menu-close class="item item-icon-left item-icon-right" href="#/app/settings">
    <i class="icon ion-levels"></i>
        Settings
    <i class="icon ion-ios7-arrow-right"></i>
</ion-item>

Now we need to add the settings to the app.js

nano js/app.js

Add

    .state('app.settings', {
      url: "/settings",
      views: {
        'menuContent' :{
          templateUrl: "templates/settings.html",
        }
      }
    })

Above

.state('app.main...

Now we need to create the settings file.

nano templates/settings.html

Add

<ion-view title="Settings">
   <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Settings</h1>
  </ion-content>
</ion-view>

Uh oh, after I ran this in the emulator I couldn’t get back to the main window. I had better make another menu item.. Simple enough.

nano templates/menu.html

        <ion-item nav-clear menu-close class="item item-icon-left" href="#/app/main">
         <i class="icon ion-person"></i>
          Chats
        </ion-item>

There we go. Looking Sexy now. Almost as good as my picture (Yeah Right).

The Current menu.html

<ion-side-menus>
 
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
 
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close class="item item-icon-left" href="#/app/main">
         <i class="icon ion-person"></i>
          Chats
        </ion-item>
        <ion-item nav-clear menu-close class="item item-icon-left item-icon-right" href="#/app/settings">
         <i class="icon ion-levels"></i>
          Settings
          <i class="icon ion-ios7-arrow-right"></i>
        </ion-item>
        <ion-checkbox>
          Quiet Mode
        </ion-checkbox>
       </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Next step is to make our settings screen, it will work much like our menu

nano templates/settings.html

This is my settings.html file

<ion-view title="Settings">
  <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
        <ion-list>
                <ion-item>Delete GUID</ion-item>
                <ion-item>Change My Name</ion-item>
                <ion-item>Add A Picture</ion-item>
        </ion-list>
  </ion-content>
</ion-view>

Not too bad if I don’t say so myself.

Let’s do the main chat screen now, remember we’re just doing design right now, no “handlebars” or anything like that, that will be part 4 and part 5

nano templates/main.html

This is my code, remember design right now, then function later

<ion-view title="Chats">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
     <button menu-toggle="right" class="button button-icon icon ion-person-add"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
        <ion-list>
                <ion-item class="item item-icon-right" href="#/app/showchat/1234/Joe">Joe (5) <i class="icon ion-ios7-arrow-right"></i></ion-item>
                <ion-item class="item item-icon-right" href="#/app/showchat/1234/Missy">Missy (1) <i class="icon ion-ios7-arrow-right"></i></ion-item>
                <ion-item class="item item-icon-right" href="#/app/showchat/1234/Frank">Frank (1) <i class="icon ion-ios7-arrow-right"></i></ion-item>
        </ion-list>
  </ion-content>
</ion-view>

Looks good!

Now we need to create our app routing for showchat/{{guid}}/{{name}} (No handlebars yet)

nano js/app.js

Add this

    .state('app.showchat', {
      url: "/showchat/:chatguid/:name",
      views: {
        'menuContent' :{
          templateUrl: "templates/showchat.html",
          controller: function($stateParams,$scope){
                $scope.navTitle = $stateParams.name;
                console.log($stateParams);
                ionic.Platform.ready(function(){
                        var chat = document.getElementById('comments');
                        console.log(chat.scrollHeight);
                        chat.scrollTop = chat.scrollHeight;
                });
          }
         }
      }
    })

right above

.state('app.main...

Create your showchat.html (I lied one little handlebar) (Also I merciously stole this from rwe-uk.com)

<ion-view title="{{navTitle}}">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header" overflow-scroll="true">
		<div class="commentArea" id="comments">
			<div class="bubbledLeft">
				Hi
			</div>
			<div class="bubbledRight" style="background-image:../right_chatter.png">
				Hi there yourself
			</div>
			<div class="bubbledLeft">
				Do you speak Latin?
			</div>
			<div class="bubbledRight">
				Yes
			</div>
			<div class="bubbledLeft">
				Prove it
			</div>
			<div class="bubbledRight">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
			<div class="bubbledLeft">
				OK
			</div>
			<div class="bubbledLeft">
				Take it all back, you do speak latin.
			</div>
		</div>
  </ion-content>
	<ion-footer-bar align-title="left">
		<a class="button button-icon icon ion-camera"></a>
		<label class="item-input-wrapper">
			<input type="message" placeholder="Message">
		</label>
		<button class="button button-clear">
			Send
		</button>
 
	</ion-footer>
</ion-view>

then when you run ionic-emulate you see the output of the console file, for example:

2014-07-21 22:22:01.200 ios-sim[86955:507] stderrPath: /Users/john/Dropbox/John/projects/randomChat/platforms/ios/cordova/console.log
2014-07-21 22:22:01.201 ios-sim[86955:507] stdoutPath: /Users/john/Dropbox/John/projects/randomChat/platforms/ios/cordova/console.log

I simply tail that file tail -f /Users/john/Dropbox/John/projects/randomChat/platforms/ios/cordova/console.log

And there is my output

2014-07-21 22:26:19.025 randomChat[87368:70b] 123
2014-07-21 22:26:19.026 randomChat[87368:70b] {"chatguid":"1234","name":"Joe"}

That’s it now, for the most part our Layout is done.

–John “I’m Not A Designer” Hass

The Bug Shop

Breaking code since 2013

Ionic Part 3

Leave a Reply Cancel reply